<!DOCTYPE html>
<html>
<head>
    <title>商品管理</title>
    #include("../include/common.html")
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .alldom {
            width: 100%;
            height: 100%;
        }

        ul {
            padding: 0;
            list-style: none;
        }

        ul li {
            overflow: hidden;
            width: 120px;
            height: 120px;
            float: left;
            margin-left: 55px;
            border: 1px solid #fff;
            position: relative;
            transition: all 0.2s ease-in 0.1s;
        }

        ul li.bgclocrc {
            background-color: #f1f2fd;
            border: 1px solid #a7aae3;
        }

        ul li:hover {
            background-color: #f1f2fd;
            border: 1px solid #a7aae3;
        }

        input.changename {
            position: absolute;
            border-radius: 0px;
            left: -25px;
            bottom: 10px;
            overflow: hidden;
            width: 98px;
            height: 20px;
            color: #595c5f;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            z-index: 0;
            border: none;
        }

        input.changename:hover {
            background: none;
            color: #F33;
        }

        input {
            width: 88px;
            height: 24px;
            line-height: 20px;
            text-align: center;
            background: none;
            border: 1px solid #CCC;
            border-radius: 8px;
            transition: all 0.2s ease-in 0.1s;
            margin-left: 25px;
        }

        input:hover {
            background: #09F;
            color: #fff;
        }

        .menu-zdy {
            width: 120px;
            padding: 4px;
            height: auto;
            background: #f8f8f8;
            border: 1px solid #999;
            text-align: center;
            position: absolute;
            display: none;
        }

        .menu-zdy a {
            text-decoration: none;
            text-align: center;
            line-height: 24px;
            font-family: 'Microsoft YaHei';
            font-size: 12px;
            color: #666;
            transition: all 0.2s ease-in 0.1s;
        }

        .menu-zdy .menu-one {
            padding: 5px;
            width: 100px;
            height: 24px;
            border-bottom: 1px dashed #FC0;
        }

        .menu-zdy .menu-two {
            padding: 5px;
            width: 100px;
            height: 24px;
            border-bottom: 1px dashed #FC0;
        }

        .menu-zdy a:hover {
            padding: 3px 5px;
            color: #000;
            background: #fff;
        }


        .filechoose {
            background-color: #f1f2fd;
            border: 1px solid #a7aae3;
        }

        #divall img {
            padding: 10px;
        }

        .tab-content .webuploader-pick {
            padding: 0 0;
            background: rgb(26, 179, 148);
        }
    </style>


</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <!-- <div class="ibox-title">
            <h5>商品管理</h5>
        </div> -->
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active" style="width: 120px;height: 50px;"><a data-toggle="tab" href="#tab-1">图库</a></li>
                <li style="width: 120px;height: 50px;"><a data-toggle="tab" href="#tab-2">本地上传</a></li>

            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body form-horizontal">
                        <form id="listForm" action="list" method="get">
                            <input type="hidden" id="fromType" name="fromType" value="#(fromType)">
                            <input type="hidden" id="parentId" name="parentId" value="#if(parent??)#(parent.id)#end"/>
                            <div class="ibox-content">
                                <p style=" margin:10px auto; padding:10px 0; border-bottom:1px solid #666;">
                                    #if(parent??)<a href="#(base)/admin/resource/list?parentId=#(parent.parentId)"
                                                    class="btn btn-primary"><i class="fa fa-arrow-left"></i> 返回</a>#end
                                    <a href="javascript:;" id="createUpload" class="btn btn-primary">上传文件</a>
                                    <a href="javascript:;" id="createNew" class="btn btn-primary">创建文件夹</a>
                                    <br/></p>


                                <div class="alldom">
                                    <ul id="divall">
                                        #if(resources??)
                                        #for(resource : resources)
                                        #if(resource.isFolder)
                                        <li resourceId="#(resource.id)"><img alt=""
                                                                             src="#(base)/admin/static/img/wenjianjia.png"
                                                                             class="wenjianjia"><input type="text"
                                                                                                       class="changename"
                                                                                                       value="#(resource.name)"/>
                                        </li>
                                        #else
                                        <li resourceId="#(resource.id)" class="tupian"><img alt=""
                                                                                            src="#(imageUrl(resource.url))"
                                                                                            height="110"></li>
                                        #end
                                        #end
                                        #end
                                    </ul>
                                </div>
                                <!-- 列表 end -->
                            </div>
                        </form>
                    </div>


                </div>

                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">

                        <div class="col-sm-3">
                            <a href="javascript:;" id="filePicker" class="btn btn-primary">上传文件</a>
                        </div>
                        <div class="col-sm-3" id="fileshow">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="modal-footer col-sm-3 col-sm-offset-2">
            <button type="button" class="btn btn-w-m btn-primary" id="queding">确定</button>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    function addFile(url) {
        var parentId = $("#parentId").val();
        $.ajax({
            url: "saveFile",
            type: "POST",
            data: {"parentId": parentId, "url": url},
            dataType: "json",
            cache: false,
            success: function (response) {
                if (response.type == "success") {
                    var html = '<li tupianId="' + response.data + '" class="tupian"><img alt="" src="' + url + '" height="110"></li>';
                    $("#divall").append(html);
                } else {
                    swal({title: '', text: response.msg, icon: 'error'});
                }
            }
        });
    }

    $(".nav-tabs").on("click", "li", function () {
        var filechoose = $(".tab-content").find(".filechoose");
        if (filechoose.length > 0) {
            filechoose.removeClass("filechoose");
        }
    });

    $("#divall").on("click", ".tupian", function () {
        var filechoose = $("#divall").find(".filechoose");
        if (filechoose.length > 0) {
            filechoose.removeClass("filechoose");
        }
        $(this).addClass("filechoose");
    });

    $("#queding").on("click", function () {
        if ($("#tab-1").hasClass("active")) {
            var filechoose = $("#divall").find(".filechoose");
            if (filechoose.length < 1) {
                alert("请选择图片");
                return;
            }
            var url = filechoose.find("img").attr("src");
            chooseTupian(url);
            //提交
        } else if ($("#tab-2").hasClass("active")) {
            if ($("#fileshow").hasClass("filechoose")) {
                //提交
                var url = $("#fileshow").find("img").attr("src");
                chooseTupian(url);
            } else {
                alert("请选择图片");
                return;
            }
        }
    });

    function chooseTupian(url) {
        var fromType = $("#fromType").val();
        frameElement.api.opener.chooseResourceCall(fromType, url);
        frameElement.api.close();
    }

</script>
<script type="text/javascript">
    $(document).bind('click', function (e) {
        var e = e || window.event; //浏览器兼容性
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素
            if (elem.id && (elem.id == 'fileshow' || elem.id == 'queding')) {
                return;
            }
            elem = elem.parentNode;
        }
        $("#fileshow").removeClass("filechoose");
        //$('#test').css('display', 'none'); //点击的不是div或其子元素
    });

    $("#divall").on("dblclick", ".wenjianjia", function () {
        var resourceId = $(this).parent().attr("resourceId");
        $("#parentId").val(resourceId);
        $("#listForm").submit();
    });

    $("#fileshow").on("click", function () {
        $(this).addClass("filechoose");

    });

    function fileUploadCall(fromType, fileUrl) {
        if (fromType == "upload") {
            addFile(fileUrl);
        } else if (fromType == "localUpload") {
            $("#fileshow").html('<img class="img" src="' + fileUrl + '" alt="pic" height="110">')
        }
    }

    $("#filePicker").uploader({"fromType": "localUpload"});
    $("#createUpload").uploader({"fromType": "upload"});
    //
    $(function () {
        var $parent = $('#divall'), $bgcolor = $('#divall li'), $carry = $('#createNew'),
            $removenews = $('.remove'), $removeall = $('.removeall'), $removeright = $('#removethispc'),
            $namehide = $('#divall li input.changename'), $changename = $('#changename');
        $removenews.hide();
        //新建
        $carry.on('click', function () {
            if (confirm('确定新建文件夹？')) {

                $.ajax({
                    url: "saveFolder",
                    type: "POST",
                    data: {"name": "新建文件夹"},
                    dataType: "json",
                    cache: false,
                    success: function (response) {
                        if (response.type == "success") {
                            $parent.append("<li resourceId='" + response.data + "'><img alt='' src='/admin/static/img/wenjianjia.png' class='wenjianjia'><input type='text' \class='changename'\ value='新建文件夹'/></li>");
                        } else {
                            swal({title: '', text: response.msg, icon: 'error'});
                        }
                    }
                });


            }
        });


        //修改文件名
        $namehide.on('focus', function () {
            $(this).css('border', '1px solid #FF0000');
            $(this).val('');
            //键盘控制
            /* document.onkeydown = function (event) {
                   var e=event.srcElement;
                    if(event.keyCode==13)
                    {
                    alert('确定修改文件名?');
                    return true;
                    }
                }*/
        });
        $("#divall").on('blur', ".changename", function () {
            if (confirm('确定修改文件名？')) {
                var name = $(this).val();
                if (name == "") {
                    name = "新建文件夹";
                }
                var resourceId = $(this).parent().attr("resourceId");
                $.ajax({
                    url: "updateFolder",
                    type: "POST",
                    data: {"name": name, "id": resourceId},
                    dataType: "json",
                    cache: false,
                    success: function (response) {
                        if (response.type == "success") {
                        } else {
                            swal({title: '', text: response.msg, icon: 'error'});
                        }
                    }
                });

                $(this).css('border', 'none');
                if ($(this).val() == "") {
                    $(this).val('新建文件夹');
                } else {
                    // $(this).parent().find('span').text() = $(this).value;
                }

            }
        });

    });

</script>
